<template>
	<view style="width: 95%;" class="content">
		<view class="header">
			<view class="userinfo">
				
				<view class="face">
					<!-- <image v-if="TOKEN" @error="imageError" :src="USER_INFO.userHeadimg"></image> -->
					<image  src="../../static/img/tx.png"></image>
				</view>

				<view class="info" style="align-items: center;">
					<view class="username uni-ellipsis">{{ USER_INFO.name }}</view>
				</view>
				
			</view>
		</view>

		<view class="list">
			<view class="li" @tap="toPage('../baoxiuList/baoxiuList')">
				<view class="icon">
					<image src="../../static/HM-PersonalCenter/sever/point.png"></image>
				</view>
				<view class="text">我的报修</view>
				<image class="to" src="../../static/HM-PersonalCenter/to.png"></image>
			</view>
		</view>

		<view class="list">
			<!-- <view class="li" @tap="toPage('../pwd/pwd')">
				<view class="icon"><image src="../../static/HM-PersonalCenter/sever/security.png"></image></view>
				<view class="text">修改密码</view>
				<image class="to" src="../../static/HM-PersonalCenter/to.png"></image>
			</view> -->

			<view class="li" @tap="toPage('../feedback/feedback')">
				<view class="icon">
					<image src="../../static/HM-PersonalCenter/sever/kefu.png"></image>
				</view>
				<view class="text">意见反馈</view>
				<image class="to" src="../../static/HM-PersonalCenter/to.png"></image>
			</view>

			<!-- <view class="li" @tap="toPage('../sixin/sixin')">
				<view class="icon">
					<image src="../../static/HM-PersonalCenter/sever/choujiang.png"></image>
				</view>
				<view class="hongdian">4</view>
				<view class="text">私信</view>
				<image class="to" src="../../static/HM-PersonalCenter/to.png"></image>
			</view> -->
			
		</view>
		<view class="huizong">
			<view class="title">
				数据汇总统计
			</view>
			<view class="conten">
				<view class="left">
					<view>
						今日
					</view>
					<view class="wai">
						<view class="nei">
							{{huizong.jinri}}
						</view>
					</view>
					<view class="lan">
						报修统计
					</view>
				</view>
				<view class="right">
					<view class="right_title">
						{{time}}
					</view>
					<view class="con_list">
						<view class="li">
							<text>待审核</text>
							<text :class="huizong.shenhe?'lan':''">{{huizong.shenhe}}</text>
						</view>
						<view class="li">
							<text>待受理</text>
							<text :class="huizong.shouli?'lan':''">{{huizong.shouli}}</text>
						</view>
						<view class="li">
							<text>待派工</text>
							<text :class="huizong.paigong?'lan':''">{{huizong.paigong}}</text>
						</view>
						<view class="li">
							<text>待维修</text>
							<text :class="huizong.weixiu?'lan':''">{{huizong.weixiu}}</text>
						</view>

						<view class="li">
							<text>待完工</text>
							<text :class="huizong.wangong?'lan':''">{{huizong.wangong}}</text>
						</view>
						<view class="li">
							<text>待回访</text>
							<text :class="huizong.huifang?'lan':''">{{huizong.huifang}}</text>
						</view>
						<view class="li">
							<text>待验收</text>
							<text :class="huizong.qianshou?'lan':''">{{huizong.qianshou}}</text>
						</view>
						<view class="li">
							<text>已办结</text>
							<text :class="huizong.banjie?'lan':''">{{huizong.banjie}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="niantongji">
			<view class="title">
				{{year}}年报修统计
			</view>
			<view class="tu">
				<canvas canvas-id="canvasArea" id="canvasArea" class="charts" @touchstart="touchArea"></canvas>
			</view>
		</view>

		<!-- <view class="goOut" v-show="TOKEN"><button type="primary" @tap="goOut">退出</button></view> -->
	</view>
</template>
<script>
	import {
		formatTimeToStr
	} from '@/components/date.js';
	import uCharts from '@/components/u-charts/u-charts.js';

	import {
		mapState,
		mapMutations
	} from 'vuex';
	var _self;
	var canvaArea = null;
	export default {
		computed: mapState(['URL', 'UPDATE', 'USER_INFO', 'TOKEN']),
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,

				huizong: {
					jinri: 10,
					shenhe: 0,
					shouli: 2,
					paigong: 3,
					weixiu: 4,
					wangong: 3,
					huifang: 1,
					qianshou: 1,
					banjie: 3,
				},
				time: '星期日 2020-02-16',
				year: '2019',
				// 			severList: [
				// 				[{ name: '我的报修', icon: 'point.png', url: '../baoxiuList/baoxiuList' }],
				// 				[
				// 					{ name: '修改密码', icon: 'security.png', url: '../pwd/pwd' }
				// 					// 					{ name: '关于我们', icon: 'kefu.png', url: '../about/about' },
				// 					// 					{ name: '问题反馈', icon: 'kefu.png', url: '../feedback/feedback' }
				// 				]
				// 			]
			};
		},
		onShow() {
			console.log('是否更新' + this.UPDATE);

			if (this.UPDATE) {
				this.TO_UPDATE(false);
				this.init();
			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			...mapMutations(['SIGN_OUT', 'TO_UPDATE', 'GET_USER_INFO', 'GET_TOKEN', 'SHOW_LOGIN']),
			init() {
				this.GET_USER_INFO();
				this.GET_TOKEN();
				_self = this;
				this.cWidth = uni.upx2px(720);
				this.cHeight = uni.upx2px(500);
				var weekday = new Array(7)
				weekday[0] = "星期日"
				weekday[1] = "星期一"
				weekday[2] = "星期二"
				weekday[3] = "星期三"
				weekday[4] = "星期四"
				weekday[5] = "星期五"
				weekday[6] = "星期六"
				this.time = `${weekday[new Date().getDay()]}  ${formatTimeToStr(new Date(), 'yyyy-MM-dd')}`;
				this.year = formatTimeToStr(new Date(), 'yyyy');

				this.getServerData();
				this.getHuizong();
			},
			getHuizong() {
				uni.request({
					url: this.URL + 'getMyBxNum',
					success: (res) => {
						console.log(res.data);
						let json = res.data;
						this.huizong.jinri = json.total;
						this.huizong.shenhe = json.amountShe;
						this.huizong.shouli = json.amountShou;
						this.huizong.paigong = json.amountPai;
						this.huizong.weixiu = json.amountWei;
						this.huizong.wangong = json.amountWan;
						this.huizong.huifang = json.amountHui;
						this.huizong.qianshou = json.amountYan;
						this.huizong.banjie = json.amountJie;
					}
				});
			},
			getServerData() {
				uni.request({
					url: this.URL + 'getThisYear',
					success: function(res) {
						console.log(res.data)
						let Area = {
							categories: [],
							series: []
						};
						let json = [];
						for (let i in res.data) {
							json.push(res.data[i])
						}

						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						Area.categories = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
						Area.series = [{
							name: '数量',
							data: json
						}, ];
						_self.showArea("canvasArea", Area);
					}
				});
			},
			showArea(canvasId, chartData) {
				canvaArea = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					padding: [15, 15, 10, 15],
					legend: {
						show: false,
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						area: {
							type: 'curve',
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: false
						}
					}
				});

			},
			touchArea(e) {
				canvaArea.touchLegend(e);
				canvaArea.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			//用户点击列表项
			toPage(pagesName) {
				if (this.USER_INFO) {
					uni.navigateTo({
						url: pagesName
					});
				} else {
					this.SHOW_LOGIN();
				}
			},
			goUserInfo() {
				// 统一认证没有提供 个人信息 所以失效
				// uni.navigateTo({
				// 	url: '../userInfo/userInfo'
				// });
			},
			goOut() {
				console.log(this.URL);
				uni.showLoading({
					title: '正在退出..'
				});
				uni.request({
					url: this.URL + 'logout',
					header: {
						token: this.TOKEN
					},
					method: 'POST',
					success: res => {
						console.log(res);
						this.SIGN_OUT();
						uni.hideLoading();
					}
				});
			},
			goLogo() {
				let uid = '';

				uni.navigateTo({
					url: '../login/login1'
				});
			}
		}
	};
</script>

<style lang="scss">
	.huizong {
		.title {
			font-size: 30upx;
			color: #666;
		}

		.conten {
			display: flex;
			padding: 10upx;

			.lan {
				color: #007aff;
			}

			.hui {
				color: #8f8f94;
			}

			.left {
				border-radius: 4px;
				border: 1px solid #d5d5d6;
				width: 30%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-evenly;

				.wai {
					width: 100upx;
					height: 100upx;
					background: #007aff;
					padding: 4upx;
					border-radius: 50%;

					.nei {
						width: 100upx;
						height: 100upx;
						line-height: 100upx;
						border-radius: 50%;
						background: #efeff4;
						text-align: center;
						color: #007aff;
					}
				}
			}

			.right {
				width: 70%;

				.right_title {
					text-align: right;
					color: #666;
				}

				.con_list {
					margin-top: 10px;
					display: flex;
					flex-wrap: wrap;

					.li {
						color: #888;
						width: 25%;
						height: 110upx;
						display: flex;
						flex-direction: column;
						align-items: center;
					}
				}
			}
		}
	}

	.hongdian {
		position: absolute;
		right: 100rpx;
		padding: 4px 10px;
		height: 40rpx;
		border-radius: 28rpx;
		background-color: red;
		line-height: 40rpx;
		text-align: center;
		color: #f8f8f8;
	}

	.niantongji {
		.title {
			font-size: 30upx;
			color: #666;
		}

		.tu,
		.charts {
			width: 720upx;
			height: 500upx;
		}
	}

	page {
		background-color: #fff;
	}

	.header {
		&.status {
			padding-top: var(--status-bar-height);
		}

		background-color: rgba(0, 122, 255, 0.66);
		width: 92%;
		height: 30vw;
		padding: 0 4%;
		display: flex;
		align-items: center;

		.userinfo {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.face {
				flex-shrink: 0;
				width: 15vw;
				height: 15vw;

				image {
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}

			.info {
				display: flex;
				flex-flow: wrap;
				justify-content: center;

				.username {
					width: 220upx;
					text-align: center;
					color: #fff;
					font-size: 40upx;
				}

				.integral {
					display: flex;
					align-items: center;
					padding: 0 20upx;
					height: 40upx;
					color: #fff;
					background-color: rgba(0, 0, 0, 0.1);
					border-radius: 20upx;
					font-size: 24upx;
				}
			}
		}

		.setting {
			flex-shrink: 0;
			width: 6vw;
			height: 6vw;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.hover {
		background-color: #eee;
	}

	.orders {
		background-color: #ff6364;
		width: 92%;
		height: 11vw;
		padding: 0 4%;
		margin-bottom: calc(11vw + 40upx);
		display: flex;
		align-items: flex-start;
		border-radius: 0 0 100% 100%;

		.box {
			width: 98%;
			padding: 0 1%;
			height: 22vw;
			background-color: #fefefe;
			border-radius: 24upx;
			box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
			margin-bottom: 40upx;
			display: flex;
			align-items: center;
			justify-content: center;

			.label {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-flow: wrap;
				width: 100%;
				height: 16vw;
				color: #666666;
				font-size: 26upx;

				.icon {
					position: relative;
					width: 7vw;
					height: 7vw;
					margin: 0 1vw;

					.badge {
						position: absolute;
						width: 4vw;
						height: 4vw;
						background-color: #ec6d2c;
						top: -1vw;
						right: -1vw;
						border-radius: 100%;
						font-size: 20upx;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						z-index: 10;
					}

					image {
						width: 7vw;
						height: 7vw;
						z-index: 9;
					}
				}
			}
		}
	}

	.list {
		width: 100%;
		border-bottom: solid 26upx #f1f1f1;
		background: #fff;

		.li {
			width: 92%;
			height: 100upx;
			padding: 0 4%;
			border-bottom: solid 1upx #e7e7e7;
			display: flex;
			align-items: center;

			&.noborder {
				border-bottom: 0;
			}

			.icon {
				flex-shrink: 0;
				width: 50upx;
				height: 50upx;

				image {
					width: 50upx;
					height: 50upx;
				}
			}

			.text {
				padding-left: 20upx;
				width: 100%;
				color: #666;
			}

			.to {
				flex-shrink: 0;
				width: 40upx;
				height: 40upx;
			}
		}
	}

	.goOut {
		margin: 20px;
	}
</style>
